<template>
  <div>
    <!-- 卡片 -->
    <div>
      <el-card class="box-card" shadow="never">
        <div slot="header">
          <el-button class="btn" type="primary">保存</el-button>
          <el-button class="btn">取消</el-button>
        </div>
        <div class="phoneAll">
          <!-- 手机端布局 -->
          <div class="phoneStyle">
            <div class="phoneTop">这是一张图片</div>
          </div>
          <!-- 样式设置 -->
          <div class="phoneRight">
            <div class="r_top">
              <span class="cen_title">banner设置</span>
            </div>
            <div class="r_cen">
              <div class="cen_title">样式</div>
              <div class="r_select">
                <el-select v-model="value" placeholder="填充">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="r_top">
              <span class="cen_title">内容</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      value: '',
    }
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.btn {
  margin-right: 20px;
  float: right;
  width: 100px;
  height: 48px;
  border-radius: 4px;
}
.cen_title {
  margin: 10px 20px;
  font-size: 18px;
  color: #333333;
}
.phoneAll {
  display: flex;
  justify-content: space-around;
  .phoneStyle {
    width: 480px;
    height: 854px;
    border-radius: 10px;
    border: 1px solid red;
    .phoneTop {
    }
  }
  .phoneRight {
    width: 360px;
    height: 917px;
    background: #f7f7f7;
    .r_top {
      width: 360px;
      height: 70px;
      background: #e0e5eb;
      display: flex;
      align-items: center;
    }
    .r_cen {
      width: 360px;
      height: 106px;
      background: #f7f7f7;
    }
    .r_select {
      margin: 10px 20px;
    }
  }
}
</style>
